<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>用户列表</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand" />  
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>
		<style>
			body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
			#r-result{
				position: absolute;
				bottom: 0px;
				left: 0px;
				z-index: 9999;
				background: #393D49;
				width: 100%;
			}
			#footer{
				width: 100%;
			}
			
		</style>
	</head>
	<body>
		<section class="layui-larry-box">
			<div class="larry-personal">
				<div class="layui-tab">
					<blockquote class="layui-elem-quote mylog-info-tit" style="background: #fff;">
						<ul class="handle-box">
							<li class="handle-item">
								<!--<span class="layui-form-label"  style="float: left;line-height: 30px;">输入用户名：</span>
								<div class="layui-input-inline"style="float: left;">
									<input type="text" id="distribution_name" v-model="deviceNo" autocomplete="off" placeholder="请输入用户名" class="layui-input">
								</div>-->
								<span class="layui-form-label"  style="float: left;line-height: 30px;">输入查询时间：</span>
								<div class="layui-input-inline">
							      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
							    </div>
							    <div class="layui-input-inline">
							      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
							    </div>
								<div class="layui-btn mgl-20" id="distribution" >查询</div>
								<div class="layui-btn btn-add btn-default mgl-20" id="refresh" >重置</div>
							</li>
						</ul>
					</blockquote>
				</div>
			</div>
		</section>
		<div id="container"></div> 
		<div id="r-result"></div>
		<script src="layui/layui.js"></script>
		<script src="js/common.js"></script>
		<script>
			layui.use(['layer','laydate'], function() {
				var $ = layui.jquery;
				var laydate = layui.laydate;
				var map = new BMap.Map("container");
				map.enableScrollWheelZoom(true);
				console.log(deviceId);
				//获取时间
			    var date = new Date();
			    var seperator1 = "-";
			    var seperator2 = ":";
			    var month = date.getMonth() + 1;	
			    var strDate = date.getDate();
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    if (strDate >= 0 && strDate <= 9) {
			        strDate = "0" + strDate;
			    }
			    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
			            + " " + date.getHours() + seperator2 + date.getMinutes()
			            + seperator2 + date.getSeconds();
			 	var start = date.getFullYear() + seperator1 + month + seperator1 + strDate
			            + " " + '00' + seperator2 + '00'
			            + seperator2 + '00';
				//初始化
				$(function(){
					$("#LAY_demorange_s").val(start);
					$("#LAY_demorange_e").val(currentdate);
					$.ajax({
						url :url + '/ic-iot/users/'+adminId+'/device/'+deviceId+'/locations',
						type : 'GET',
						data:{
							startTime: start,
							endTime:currentdate,
						},
						dataType : 'json',
						beforeSend: function(request) {
				            request.setRequestHeader("accessToken", accessToken);
				        },
						success : function(data) {
							if(data.numReturn == 0){
								layer.msg("暂无数据");
							}else{
								//开始点
								var lat = data.result[0].latitudeBaidu;
								var lon = data.result[0].longitudeBaidu;
								var p1 = new BMap.Point(lon,lat);
								
								//结束点
								var s = data.result.length-1;
								var lat1 = data.result[s].latitudeBaidu;
								var lon1 = data.result[s].longitudeBaidu;
								var p2 = new BMap.Point(lon1,lat1);
								var arr = [];
								
								if(s<30){
									for(i=1; i<data.result.length-1; i++){
										var latitude = data.result[i].latitudeBaidu;
										var longitude = data.result[i].longitudeBaidu;
										var point = new BMap.Point(longitude,latitude);
										arr.push(point)
									}
								}else{
									for(i=1; i<30; i++){
										var latitude = data.result[i].latitudeBaidu;
										var longitude = data.result[i].longitudeBaidu;
										var point = new BMap.Point(longitude,latitude);
										arr.push(point)
									}
								}
								map.centerAndZoom(point, 10);
								var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
								driving.search(p1, p2,{waypoints:arr});
								
								var myIcon = new BMap.Icon("img/che.png", new BMap.Size(20, 20), {    //小车图片
									//offset: new BMap.Size(0, -5),    //相当于CSS精灵
									imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
								 });
								window.run = function (){
									var driving = new BMap.DrivingRoute(map);    //驾车实例
									driving.search(p1, p2);
									driving.setSearchCompleteCallback(function(){
										var pts = driving.getResults().getPlan(0).getRoute(0).getPath();   
										var paths = pts.length;    //获得有几个点
							
										var carMk = new BMap.Marker(pts[0],{icon:myIcon});
										map.addOverlay(carMk);
										i=0;
										function resetMkPoint(i){
											carMk.setPosition(pts[i]);
											if(i < paths){
												setTimeout(function(){
													i++;
													resetMkPoint(i);
												},100);
											}
										}
										setTimeout(function(){
											resetMkPoint(5);
										},100)
							
									});
								}
							
								setTimeout(function(){
									run();
								},1500);
							}
						}
					});
				});
				
				$("#distribution").on('click',function(){
					var start = $("#LAY_demorange_s").val();
					var end = $("#LAY_demorange_e").val();
					//var name = $("#distribution_name").val();
					$.ajax({
						type:"get",
						url:url + '/ic-iot/users/'+adminId+'/device/'+deviceId+'/locations',
						data:{
							startTime:start,
							endTime:end,
						},
						dataType : 'json',
						beforeSend: function(request) {
				            request.setRequestHeader("accessToken", accessToken);
				        },
						success : function(data) {
							if(data.numReturn == 0){
								layer.msg("暂无数据");
							}else{
								//开始点
								var lat = data.result[0].latitudeBaidu;
								var lon = data.result[0].longitudeBaidu;
								var p1 = new BMap.Point(lon,lat);
								
								//结束点
								var s = data.result.length-1;
								var lat1 = data.result[s].latitudeBaidu;
								var lon1 = data.result[s].longitudeBaidu;
								var p2 = new BMap.Point(lon1,lat1);
								var arr = [];
								
								if(s<30){
									for(i=1; i<data.result.length-1; i++){
										var latitude = data.result[i].latitudeBaidu;
										var longitude = data.result[i].longitudeBaidu;
										var point = new BMap.Point(longitude,latitude);
										arr.push(point)
									}
								}else{
									for(i=1; i<30; i++){
										var latitude = data.result[i].latitudeBaidu;
										var longitude = data.result[i].longitudeBaidu;
										var point = new BMap.Point(longitude,latitude);
										arr.push(point)
									}
								}
								map.centerAndZoom(point, 10);
								var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
								driving.search(p1, p2,{waypoints:arr});
								
								var myIcon = new BMap.Icon("img/che.png", new BMap.Size(20, 20), {    //小车图片
									//offset: new BMap.Size(0, -5),    //相当于CSS精灵
									imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
								 });
								window.run = function (){
									var driving = new BMap.DrivingRoute(map);    //驾车实例
									driving.search(p1, p2);
									driving.setSearchCompleteCallback(function(){
										var pts = driving.getResults().getPlan(0).getRoute(0).getPath();   
										var paths = pts.length;    //获得有几个点
							
										var carMk = new BMap.Marker(pts[0],{icon:myIcon});
										map.addOverlay(carMk);
										i=0;
										function resetMkPoint(i){
											carMk.setPosition(pts[i]);
											if(i < paths){
												setTimeout(function(){
													i++;
													resetMkPoint(i);
												},100);
											}
										}
										setTimeout(function(){
											resetMkPoint(5);
										},100)
							
									});
								}
							
								setTimeout(function(){
									run();
								},1500);
							}
						}
					});
				})
				
				
				

			
			});
		</script>

	</body>

</html>